<template>
  <div>
    <div class="personal" @touchend="personalTouch" :style="mastery ? evaluateActiveStyle : ''"></div>
    <div class="activty" @touchend="activtyTouch" :style="mastery ? evaluateHiddenStyle : ''"></div>
    <div class="recommend" @touchend="recommendTouch" :style="mastery ? evaluateHiddenStyle : ''"></div>
    <div class="vip" @touchend="vipTouch" :style="mastery ? vipStyle : ''"></div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex"
export default {
  beforeMount() {
    this.loadMastery()
  },
  computed:{
    vipStyle(){
      return{
        filter: this.userVip.isVip ? '' : 'grayscale(1)',
        display: this.userVipList[2].evaluateActive && this.mastery.changed? 'none' : 'block'
      }
    },
    evaluateActiveStyle(){
      return{
        filter: this.userVipList[2].evaluateActive && this.mastery.changed? 'drop-shadow(rgb(254, 172, 81) 2px -2px 0.5rem) drop-shadow(rgb(254, 172, 81) -2px 2px 0.5rem)' : ''
      }
    },
    evaluateHiddenStyle(){
      return{
        display: this.userVipList[2].evaluateActive && this.mastery.changed? 'none' : 'block'
      }
    },
    ...mapGetters("personalStatus",{
      userVip: "getUserVip",
      userVipList: "getUserVipList",
      mastery: "getUserMastery"
    }),
    ...mapGetters("seedActivityStatus", {
      isResulteShow: "getIsResulteShow",
    })
  },
  methods: {
    //进入vip模块
    vipTouch: function(){
      this.$parent.vipEntry()
    },
    //点击进入个人中心
    personalTouch: function () {
      this.touchMusic()
      this.setIsResulteShow(false)                            //操作之后再次返回就会出现活动弹窗
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/personal/menu" })
        }
      })
    },
    activtyTouch: function () {
      this.touchMusic()
      this.setIsResulteShow(false)                            //操作之后再次返回就会出现活动弹窗
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/activity" })
        }
      })
    },
    //点击全部绘本
    recommendTouch: function () {
      this.touchMusic()
      this.setIsResulteShow(false)                            //操作之后再次返回就会出现活动弹窗
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/picbookList" })
        }
      })
    },
    //用户评测结果
    loadMastery: async function () {
      const json = {
        deviceUuid: this.deviceUuid,
        isInSeedActivity: this.isResulteShow                 // 如果为 false，表示是普通模式
      }
      const [data, err] = await this.awaitWarp(this.$post(this.api.loadMastery, json))
      if (data) {
        this.setUserMastery(data.mastery)
        this.studyExplain(data.abilityAndExplainationMap)
      }
    },
    ...mapActions("personalStatus", ["setUserMastery", "studyExplain"]),
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("seedActivityStatus", ["setIsResulteShow"]),

  }
}
</script>

<style lang="stylus" scoped>
$listIcon()
  position absolute
  width 13vh
  height 16.5vh
  top -17vh
  z-index 99
.personal
  background url($urlTitle + 'icon/icon-我的.png') 0 0 / 100% 100%
  $listIcon()
  right 0.2rem
.activty
  background url($urlTitle + 'icon/icon-活动.png') 0 0 / 100% 100%
  $listIcon()
  right 20vh
.vip
  background url($urlTitle + 'icon/VIP图标.png') 0 0 / 100% 100%
  $listIcon()
  right 40vh
.recommend
  background url($urlTitle + 'icon/icon-全部绘本.png') 0 0 / 100% 100%
  $listIcon()
</style>
